<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开课吧 购物车 render</title>
    <style>
        .activeCourse{background: #ccc;}
    </style>
</head>
<body>
    <!-- 宿主文件 -->
    <div id="app">
         
    </div>
</body>
</html>
<script src="vue.js"></script>
<script>
    const app= new Vue({
        el:"#app",
        data() {
            return {
                title: "hello vue!",
                course:'web初级',
                selectedCourse:'',
                courses:["web全找课程","web高级课程"],
                title:"开课吧 购物车"
            }
        },
        methods: {
            addCourse() {
              this.courses.push(this.course);
              this.course=""; 
            },
        },
        render(){
            with(this){return _c('div',{attrs:{"id":"app"}},[_v("\n        "+_s(title)+"\n        "),_c('p',[_c('input',{directives:[{name:"model",rawName:"v-model",value:(course),expression:"course"}],attrs:{"type":"text"},domProps:{"value":(course)},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;return addCourse($event)},"input":function($event){if($event.target.composing)return;course=$event.target.value}}})]),_v(" "),_c('button',{on:{"click":addCourse}},[_v("新增")]),_v(" "),_l((courses),function(item){return _c('div',{key:item},[_c('p',{class:{activeCourse:selectedCourse === item},on:{"click":function($event){selectedCourse=item}}},[_v(" "+_s(item))]),_v(" "),_c('p',{class:{activeCourse:selectedCourse === item},on:{"click":function($event){selectedCourse=item}}},[_v(" "+_s(item))])])}),_v(" "),_c('h2',{attrs:{"title":title}},[_v("\n            "+_s(title)+"\n        ")])],2)}
        },
    })
     
    console.log(app.$options.render);
</script>